<template>
  <Edialog
    :title="title"
    :internal="internalDialog"
    :outershow="imgShow"
    @close="emitFn('close')"
  >
    <div>
      <div
        class="addAedit"
        style="padding: 0 20px 0 0px; display: flex; justify-content: center"
      >
        <el-image
          style="width: 50vh; height: 50vh"
          :src="url + ''"
          :preview-src-list="[url]"
          fit="fill"
        ></el-image>
      </div>
      <div
        v-if="showRefreshBtn"
        class="daj refreshBtn"
        @click="emitFn('refreshClick')"
      >
        刷新
      </div>
    </div>
  </Edialog>
</template>

<script>
import Edialog from "@/components/Edialog";
export default {
  name: "Eimage",
  components: {
    Edialog,
  },
  props: {
    // 显示 与 隐藏
    imgShow: {
      type: Boolean,
      default: false,
    },
    // 图片路径
    imgUrl: {
      type: String,
    },
    title: {
      type: String,
      default: "图片",
    },
    internalDialog: {
      type: Boolean,
      required: false,
    },
    // 是否显示刷新按钮
    showRefreshBtn: {
      type: Boolean,
      required: false,
    },
  },
  data() {
    return {
      url: "",
    };
  },
  watch: {
    imgUrl: {
      handler(newVal) {
        if (newVal.includes("https://") || newVal.includes("http://")) {
          this.url = newVal;
        } else {
          this.url = this.$store.getters.baseUrl + newVal;
        }
      },
    },
  },
  methods: {
    emitFn(val) {
      this.$emit(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.refreshBtn {
  margin-top: 10px;
  color: red;
  font-size: 24px;
  cursor: pointer;
}
</style>
